前一篇我們實驗 Constraints 各種設定會造成的影響後，相信大家已經對於 Constraints 有所理解了。今天我們來將昨天學到的，實際應用在真實的設計當中。

卡片式的設計在 RWD 網頁中相當常見，像是 IG、FB、電商網站，經常會見到它的身影。咱們就來實作一個可以自由縮放的卡片式 UI 吧！

1. 首先製作出下圖這張卡片佈局 (記得所有的物件一定都要放在一個 Frame 中，之後設定 constraints 才會起作用)

2. 接著將中間方塊填入一張圖片 (因為待會要做 RWD 縮放，故這張背景圖需要設定成 Fill )：

3. 將此 Frame 中的每個物件都設定好對應的 constraints

4. 都設定好了之後，任意縮放最外層的 Frame，來測試看看這張卡的是否如我們預期吧？

太好了，一切看起來都是我們預料中的縮放佈局方式，響應式卡片設計 easily done！

上面這個案例是為了此篇教學而特別簡化的案例，實務上其實也可以用這個方法來設計更復雜可拉伸的響應式網頁，像是這樣 (一樣做了一些簡化方便理解)：

此篇教學我們綜合應用了上一篇所討論的 constraints 機制 (RWD 響應式設計的利器- 理解 Figma 的 Constraints 機制)，實作出一個能夠拉伸的響應式卡片。如果對於 Constraints 機制還是不了解，或是這篇看的有點吃力，記得再回去復習一下再回來試試看喔！

T G I F !
終於週末了，祝大家假期愉快，咱們明天見！